<template>
  <div>
    <h3>v-model语法糖</h3>
    <!-- 
      v-model是一个语法糖(连招) 方便开发者快速获取数据
      原理: (针对不同的表单元素有区别)
      1. input type="text"
      :value   和@input的组合(默认)
      2. :value 和@change组合

      3. input type= "checkbox"
      :checked和@change组合

     -->
     <h3>:value和@input组合</h3>
     <input type="text" v-model="msg" >
     <hr>
     原理: <input type="text" :value="msg" @input="msg=$event.target.value" >
     <h3>:value 和 @change组合(了解即可)</h3>
     <input type="text" v-model.lazy="msg2" >
     <hr>
     原理: <input type="text" :value="msg2" @change="msg2=$event.target.value" >

     <h3>:checked和@change事件</h3>
     <input type="checkbox" v-model="flag">
     <hr>
     原理: <input type="checkbox" :checked="flag" @change="flag=$event.target.checked">
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: '学习vue了',
      msg2: 'abc',
      flag: true
    }
  },
  methods: {
    handleInput(e) {
      console.log(e.target.value)
      this.msg = e.target.value
    },
    handleLazy(e) {
      console.log(e.target.value)
      this.msg2 = e.target.value
    },
    handleChange(e) {
      this.flag = e.target.checked
    }
  }
}
</script>

<style>

</style>